<template>
	<view>
		<view class="card-list waterfall">
			<view class="waterfall-column" v-for="(col, colIndex) in columnCount" :key="colIndex">
				<view 
					class="card-item" 
					v-for="(item, index) in getColumnItems(colIndex)" 
					:key="item.id || index"
					@click="goExpert(item.id, item.type)"
				>
					<!-- 卡片内容保持不变 -->
					<view class="card-cover">
						<image
							:src="item.cover"
							mode="aspectFill"
							style="border-radius: 16rpx 16rpx 0 0;width: 100%;height: 400rpx;display: block;border: 0;"
						></image>
					</view>
					<view class="card-body">
						<view class="card-title ellipsis-3-lines">
							{{item.title}}
						</view>
						<view class="card-info" v-if="type != 'colony'">
							<view class="card-info-price">
								NT$ {{item.price}}
							</view> 
							<view>/</view> 
							<view class="card-info-unit">
								hr
							</view> 
						</view>
					</view>
					<!--達人底欄開始-->
					<view class="card-footer" v-if=" item.type== 1 ">
						<view class="card-footer-avatar" @click.stop="goUserDetail(item.uid)">
							<view class="card-avatar-image" >
								<u-image
									:src="item.avatar"
									height="38rpx"
									width="38rpx"
									shape="circle"
									mode="widthFix"
								></u-image>
							</view>
							<view class="card-footer-name">{{item.nickname}}</view>
						</view>
						<view class="card-footer-likes" v-if="item.is_like == 1">
							<view class="card-footer-likes-images" @click.stop="handleLike(item.id)">
								<u-image
									src="/static/images/icon/likes_active.png"
									height="34rpx"
									width="34rpx"
								></u-image>
							</view>
							<view class="card-likes-item-active">
								{{item.likes}}
							</view>
						</view>
						<view class="card-footer-likes" v-else>
							<view class="card-footer-likes-images" @click.stop="handleLike(item.id)">
								<u-image
									src="/static/images/icon/likes-black.png"
									height="34rpx"
									width="34rpx"
								></u-image>
							</view>
							<view class="card-likes-item">
								{{item.likes}}
							</view>
						</view>
					</view>
					<!--達人底欄結束-->
					<!--社群底欄開始-->
					<view class="card-footer" v-if="item.type== 3">
						<view class="card-footer-avatar" @click.stop="goUserDetail(item.uid)">
							<view class="card-avatar-image">
								<u-image
									:src="item.avatar"
									height="38rpx"
									width="38rpx"
									shape="circle"
									mode="widthFix"
								></u-image>
							</view>
							<view class="card-footer-name">{{item.nickname}}</view>
						</view>
						<view class="card-footer-likes" v-if="item.is_like == 1">
							<view class="card-footer-likes-images" @click.stop="handleLike(item.id)">
								<u-image
									src="/static/images/icon/likes_active.png"
									height="34rpx"
									width="34rpx"
								></u-image>
							</view>
							<view class="card-likes-item-active">
								{{item.likes}}
							</view>
						</view>
						<view class="card-footer-likes" v-else>
							<view class="card-footer-likes-images" @click.stop="handleLike(item.id)">
								<u-image
									src="/static/images/icon/likes-black.png"
									height="34rpx"
									width="34rpx"
								></u-image>
							</view>
							<view class="card-likes-item">
								{{item.likes}}
							</view>
						</view>
					</view>
					<!--社群底欄結束-->
					<!--任務底欄開始-->
					<view class="card-footer" v-if="item.type==2">
						<view>
							<view class="card-footer-likes" v-if="item.is_like == 1" >
								<view class="card-footer-likes-images" @click.stop="handleLike(item.id)">
									<u-image
										src="/static/images/icon/likes_active.png"
										height="34rpx"
										width="34rpx"
									></u-image>
								</view>
								<view class="card-likes-item-active">
									{{item.likes}}
								</view>
							</view>
							<view class="card-footer-likes" v-else>
								<view class="card-footer-likes-images" @click.stop="handleLike(item.id)">
									<u-image
										src="/static/images/icon/likes-black.png"
										height="34rpx"
										width="34rpx"
									></u-image>
								</view>
								<view class="card-likes-item">
									{{item.likes}}
								</view>
							</view>
						</view>
						<view class="foot-recruit-right" @click.stop="placeOrder(item.id)">
							<view class="foot-recruit-btn">
								搶單
							</view>
						</view>
					</view>
					<!--任務底欄結束-->
					<view v-else>
						
					</view>
				</view>
			</view>
		</view>
		<view class="empty-card" v-if="listData.length == 0">
			<!-- 空状态保持不变 -->
		</view>
	</view>
</template>

<script>
	import { archivesLikes } from '@/config/api.js';
	
	export default {
		name:"card-list",
		props: {
		    listData: {
		      type: Array,
		      default: () => []
		    },
			type:{
				type:String,//task:達人,recruit:任務,colony:社群,likes:點贊,star:收藏
				default:() => ''
			}
		},
		data() {
			return {
				showEmpty: true,
				columnCount: 2 // 瀑布流列数
			};
		},
		mounted() {
			this.fetchData();
		},
		computed: {
			// 将列表数据分配到各列
			getColumnItems() {
				return (colIndex) => {
					return this.listData.filter((_, index) => index % this.columnCount === colIndex);
				};
			}
		},
		methods:{
			fetchData(){
				let res = uni.getStorageSync('userId');
				if( res.length == 0 ){
					this.showEmpty = false;
				}
			},
			goExpert(id, type){
				if( type == 3 ){
					uni.navigateTo({
						url: '/pages/content/colony?id='+id
					});
				} else {
					uni.navigateTo({
						url: '/pages/content/expert?id='+id
					});
				}
			},
			goUserDetail(uid){
				uni.navigateTo({
					url:'/pages/home/user?uid='+uid
				})
			},
			goLogin(){
				uni.navigateTo({
					url: '/pages/index/login'
				});
			},
			handleLike(id){
				let res = uni.getStorageSync('userId');
				if( res.length == 0 ){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/index/login'
						});
					}, 1500)
				} else {
					uni.showLoading();
					let that = this;
					let data = {
						id:id
					}
					archivesLikes(data).then((res) => {
						//success
						uni.hideLoading();
						for( let i in that.listData ){
							if( that.listData[i].id == id ){
								if( that.listData[i].is_like == true ){
									that.listData[i].is_like = false
									that.listData[i].likes--
								} else {
									that.listData[i].is_like = true
									that.listData[i].likes++
								}
							}
						}
					}).catch(() =>{
						
					})
				}
			},
			placeOrder(id){
				let info = uni.getStorageSync('userInfo');
				if(info.length != 0){
					uni.navigateTo({
						url: '/pages/order/place?id='+id,
						success: res => {},
						fail: () => {},
						complete: (res) => {
							console.log(res)
						}
					});
				} else {
					uni.showToast({
						title: "請先登錄",
						icon:'none',
						success: (res) => {
							
						},
						fail: (res) => {
							
						},
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/login',
							success: res => {},
							fail: () => {},
							complete: (res) => {
								console.log(res)
							}
						});
					}, 1500);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.card-list.waterfall {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	
	.waterfall-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 14rpx;
		
		&:last-child {
			margin-right: 0;
		}
		
		.card-item {
			width: 100%;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
			
			.card-cover{
				width: 100%;
				box-sizing: border-box;
			}
			.card-body{
				width: 100%;
				padding: 20rpx 24rpx 0;
				word-wrap: break-word;
				box-sizing: border-box;
				
				.card-title{
					font-size: 28rpx;
					color: #020202;
					font-weight: 600;
				}
				.ellipsis-3-lines {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height:40rpx;
					max-height: calc(3 * 1.5em);
				}
				.card-info{
					width: 100%;
					padding: 16rpx 0 0;
					box-sizing: border-box;
					color: #808690;
					font-size: 28rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					.card-info-price{
						color: #1AAEC0;
						margin-right: 6rpx;
						font-weight: 600;
						font-size: 30rpx;
					}
					.card-info-unit{
						color: #808690;
						margin-left: 6rpx;
					}
				}
			}
			.card-footer{
				width: 100%;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 24rpx 24rpx 24rpx;
				height: 60rpx;
				align-items: center;
				margin-bottom: 4rpx;
				
				.card-footer-avatar{
					display: flex;
					justify-content: flex-start;
					line-height: 60rpx;
					align-items: center;
					
					.card-avatar-image{
						margin-right: 8rpx;
					}
					
					.card-footer-name{
						color: #6A707C;
						font-size: 26rpx;
						max-width: 154rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 60rpx;
					}
				}
				.card-footer-likes{
					display: flex;
					justify-content: flex-end;
					font-size: 24rpx;
					line-height: 60rpx;
					align-items: center;
					
					.card-footer-likes-images{
						padding-right: 10rpx;
						padding-bottom: 6rpx;
					}
					.card-likes-item{
						color: #6A707C;
						font-size: 28rpx;
					}
					.card-likes-item-active{
						color: #1AAEC0;
						font-size: 28rpx;
					}
				}
				
				.foot-recruit-right{
					.foot-recruit-btn{
						color: #232426;
						border: 2rpx solid #E5E6E8;
						font-size: 24rpx;
						padding: 8rpx 26rpx;
						border-radius: 200rpx;
						box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
					}
				}
			}
		}
	}
}

.empty-card{
	width: 100%;
	
	.card-info{
		width:100%;
		text-align: center;
		
		.title{
			width: 100%;
			color:#232426;
			font-size: 28rpx;
			text-align: center;
			margin-top:320rpx;
		}
		.btn{
			padding: 12rpx 40rpx;
			border-radius: 200rpx;
			background-color: #27C5D6;
			color: #fff;
			display: inline-block;
			margin: 64rpx auto 0;
			font-size:28rpx;
		}
	}
}
</style>